<template>
  <div>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="#3a48bf"
      @change="onChange"
      width="100%"
    >
      <van-swipe-item v-for="(item, index) in images" :key="index">
        <img v-lazy="item.swipeImag" class="image" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          <div
            :class="['tab', { active: currentIndex == index }]"
            v-for="(item, index) in images"
            :key="index"
          ></div>
        </div>
      </template>
    </van-swipe>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentIndex: 0,
    };
  },
  props: {
    images: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  methods: {
    onChange(index) {
      this.currentIndex = index;
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/base.less");
 .my-swipe .van-swipe-item {
    height: 200px;
    .image {
    height: 100%;
    display: block;
    width: 100%;
  }
  }
.custom-indicator {
  position: absolute;
  right: calc(~"50% - 20px");
  bottom: 5px;
  display: flex;
  width: 40px;
  justify-content: space-around;
  div {
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: #ccc;
  }
  .active {
    background-color: @mainColor;
  }
}
</style>